<template>
  <div class="onerow">
    <div class="col-4">
      <h3>组件配置页面展示</h3>
       <div class="draggable" style="padding: 20px"  >
	    <svg id="svgobj" width="100%" height="700" x="0" y="0" >
		<rect width="100%" height="100%" x="0" y="0" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0);" id="rectobj" ></rect>
		<PublicSvgItem v-for="item in rowList" :key="item.id" :item="item" :design="isdesign" @click="mouseclick" @handlexy="putHandlerListXY" /> 
		</svg>
 	 
	</div>
    </div>

	
    <div class="col-5">
      <h3>可用组件列表</h3>
	    <div
        class="list-group"    >
	    <div class="list-group-item" v-for="element in list1" :key="element.id">
        <div class="Grid-cell" draggable="true" :type="element.type" :srcId="element.id" >
		<PublicSvgItem :item="element"   :design="isdesign"  />
		</div>
		</div>
	  </div>
    </div>
	<CtrlProperty  :projectParameters="editPropertyTemplate" :QualityDialogFlag.sync="QualityDialogFlag" @okEvent="changedProperties" />
  </div>
</template>
<script>
 import PublicSvgItem from "../PublicSvgItem/index";
 
 
 import CtrlProperty from "../CtrlProperty/index";
 import storage from 'good-storage';
//let canva;
//let cansText;
let useComponents;
let targetComponents;
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  mounted() {
    this.initDrag();
	this.initEvent();
  },
  components: {
   	PublicSvgItem,
	CtrlProperty
  },
  data() {
    return {
	   isdesign:1,
       rowList:[],
	    flowList1: [{"type":"startNode","id":"1","label":"开始", "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":0,"y":0},"ellipse":{"rx":100,"ry":50,"fill":"white"}},
	   {"type":"loopNode","id":"2","cyclicSet":"abc","label":"循环", "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":0,"y":0},"loopNode":{"startPt":{"x":75,"y":400},"twoPt":{"x":275,"y":400},"threePt":{"x":275,"y":200},"endPt":{"x":75,"y":200,"fill":"white"}}},
	  {"type":"decideNode","id":"3","label":"分支","decideList":[{"condition":"xxx","compOperator":"=","logicOperator":"and"}], "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"polygon":{"fill":"#cccccc","leftx":100,"lefty":100,"topx":175,"topy":50,"rightx":250,"righty":100,"bottomx":175,"bottomy":150}},
	  {"type":"endNode","id":"4","label":"结束", "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":0,"y":0},"ellipse":{"rx":100,"ry":50,"fill":"white"}},
	  {"type":"assignmentNode","id":"5","label":"A=X","source":"xxx","target":"xxx", "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":0,"y":0},"assignmentNode":{"rx":100,"ry":50,"fill":"white","width":100,"height":100}} 
	  ],
	  list1: [
	   {"type":"startNode","id":"1","iselected":"0","label":"开始","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30},"font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":25,"y":15},"ellipse":{"rx":22,"ry":15,"fill":"white"},"handlerList":[]},
	   {"type":"loopNode","id":"2","iselected":"0","cyclicSet":"abc","label":"循环","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30}, "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":0,"y":0},"loopNode":{"startPt":{"x":5,"y":25},"twoPt":{"x":45,"y":25},"threePt":{"x":45,"y":5},"endPt":{"x":5,"y":5,"fill":"white"}},"handlerList":[]},
	  {"type":"decideNode","id":"3","iselected":"0","label":"分支","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30}, "decideList":[{"condition":"xxx","compOperator":"=","logicOperator":"and"}], "font":{"color":"black","size":11,"family":"Times New Roman","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"polygon":{"fill":"white","leftx":0,"lefty":15,"topx":25,"topy":0,"rightx":50,"righty":15,"bottomx":25,"bottomy":30},"handlerList":[]},
	  {"type":"endNode","id":"4","iselected":"0","label":"结束","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30},"font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":25,"y":15},"ellipse":{"rx":22,"ry":15,"fill":"white"},"handlerList":[]},
	  {"type":"assignmentNode","id":"5","iselected":"0","label":"A=X","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30},"source":"xxx","target":"xxx", "font":{"color":"black","size":11,"family":"Times New Roman","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":1,"y":0},"assignmentNode":{"rx":10,"ry":10,"fill":"white","width":48,"height":30},"handlerList":[]}, 
	  {"type":"lineNode","id":"6","iselected":"0","label":"连线","svgWidth":53,"svgHeight":33,"viewBox":{"minx":0,"miny":0,"width":50,"height":30},"source":"xxx","target":"xxx", "font":{"color":"black","rotate":{"angle":"0","x":0,"y":0}},"line":{"color":"black","width":1,"endShape":"round","deficiencyReality":"5point5"},"position":{"x":1,"y":0},"polygon":[{"x":0,"y":15},{"x":50,"y":15}],"handlerList":[],"srcId":'',"targetId":''} 
	  ],
	  //是否为移动对象
	  move:false,
	  // 菜单数据
      rowMenuData: {
         menuName: 'rowManager',
         //菜单显示的位置
         axis: {
           x: null,
           y: null
         },
         //菜单选项
         menulists: [{
           fnHandler: 'beforeaddrow', //绑定事件
           icoName: 'fa fa-home fa-fw', //icon图标
           btnName: '前面插入行' //菜单名称
         }, {
             fnHandler: 'afteraddrow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '后面插入行'
         },{
             fnHandler: 'deleterow',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '删除行'
         },
		 {
             fnHandler: 'prevView',
             icoName: 'fa fa-minus-square-o  fa-fw',
             btnName: '预览'
         }
		 ]
       },
	   menuRowId:'',
	   propertyTemplate:[
	   {"ctrlType":"input","id":"",ctrlProperties:[
	   [{type:"input",model:"modelname","value":"",label:"属性名称",options:{width:"80px;",placeholder:"请输入属性名称"}}],
	   [{type:"input",model:"title","value":"",label:"标题",options:{width:"80px;",placeholder:"请输入属性标题"}}],
	   [{type:"input",model:"width","value":"",label:"宽度",options:{width:"80px;",placeholder:"请输入属性宽度"}}],
	   [{type:"input",model:"placeholder","value":"",label:"未输入时提示文字",options:{width:"80px;",placeholder:"请输入属性提示信息"}}]
	   ]
	   }
	   ],
	   QualityDialogFlag:false,
	   editPropertyTemplate:{},
	   handlerList:[
	  {"handleType":"lefttop","x":-1,"y":-1},
	  {"handleType":"middletop" ,"x":-1,"y":-1},
	  {"handleType":"righttop","x":-1,"y":-1},
	  {"handleType":"rightmiddle" ,"x":-1,"y":-1},
	  {"handleType":"rightdown","x":-1,"y":-1},
	  {"handleType":"middledown" ,"x":-1,"y":-1},
	  {"handleType":"leftdown","x":-1,"y":-1},
	  {"handleType":"leftmiddle", "x":-1,"y":-1},
	  {"handleType":"center", "x":-1,"y":-1},
	  ],
	  clickHandle:false,
	  handleWidth:8,
	  handleHeight:8,
	  selectedHandler:'',
	  selectedItem:'',
	  distPt:{"x":0,"y":0},//鼠标点击点距离把柄中心点xy距离
	  clickedPt:{"x":0,"y":0},//鼠标单击坐标
	  lineHandlerList:[],
	  autoLineTimer:'',//自动连线定时器
    }
  },
  methods: {
  //计算连线节点把柄列表
  calculationLineHandles(item){
	//每两个点中间有一个虚的把柄
	 var i=0;
	 //lineHandlerList
	 this.lineHandleNum = this.lineHandlerList.length;
	 this.lineHandlerList=[];
	 for(i=0;i<item.polygon.length;i++){
     //retVal= "M"+item.loopNode.startPt.x+" "+item.loopNode.startPt.y+" L"+item.loopNode.twoPt.x+" "+item.loopNode.twoPt.y+" L"+item.loopNode.threePt.x+" "+item.loopNode.threePt.y+" L"+(item.loopNode.endPt.x+5)+" "+item.loopNode.endPt.y
		//当前点加入把柄
		var handleObj={};
		handleObj.x = item.polygon[i].x;
		handleObj.y = item.polygon[i].y;
		handleObj.cursor='cursor:crosshair';
		handleObj.fictitious='0';//虚拟标志为0
		handleObj.id=this.uuid();
		handleObj.fill ="#4F80FF";
		this.lineHandlerList.push(handleObj);
		//如果还有下一个点，则计算两点之间的虚把柄点 
		if(i+1<item.polygon.length){
		  var nextHandleObj=new Object();
		  var nextPt = item.polygon[i+1];
		  nextHandleObj.x = Math.floor((nextPt.x + handleObj.x)/2);
		  nextHandleObj.y = Math.floor((nextPt.y + handleObj.y)/2);
		  nextHandleObj.cursor='cursor:crosshair';
		  nextHandleObj.fictitious='1';//虚拟标志为1
		  nextHandleObj.id=this.uuid();
		  nextHandleObj.fill ="#a4bdf9";
		  this.lineHandlerList.push(nextHandleObj);
		}
	 }
	 item.handlerList = this.lineHandlerList;
	 //
	 
  },
   initDrag() {
      useComponents = document.getElementsByClassName('list-group')[0];
      //targetComponents = document.getElementsByClassName('Grid')[0];
      targetComponents = document.getElementById("svgobj");
	  useComponents.ondragstart=this.dragstart;
	  useComponents.ondrag = this.drag;
	  useComponents.ondragend= this.dragend;
	  useComponents.ondrop= this.useComponentDrop;
	  useComponents.ondragenter=this.dragenter;
	  useComponents.ondragover= this.dragover;
	  useComponents.ondragleave= this.dragleave;
	  //targetComponents.ondragstart=this.targetDragstart;
	  targetComponents.ondragenter=this.dragenter;
	  targetComponents.ondragover= this.dragover;
	  targetComponents.ondragleave= this.dragleave;
	  targetComponents.ondrop= this.drop;
	 // targetComponents.onmousemove = this.mousemove;
	 let rectobj = document.getElementById('rectobj');
	
	 let w1  = rectobj.width.animVal.value;
	  
	   console.log('w1:'+w1);
	 
	 //debugger;
    },
	initEvent(){
	window["handleMouseDown"] = (evt, id) => {
      this.handleMouseDown(evt, id);
    };
	window["handleMouseMove"] = (evt, id) => {
      this.handleMouseMove(evt, id);
    };
	window["handleMouseUp"] = (evt, id) => {
      this.handleMouseUp(evt, id);
    };
	targetComponents.setAttribute("onmousedown", "handleMouseDown(evt,'1')");
	targetComponents.setAttribute("onmousemove", "handleMouseMove(evt,'1')");
	targetComponents.setAttribute("onmouseup", "handleMouseUp(evt,'1')");
	document.onmouseup = this.handleMouseUp;
	},
    dragstart(e) {
		////debugger;    
		this.move = false;
        console.log('dragstart:'+JSON.stringify(e.target));
		
		this.dragObjType = e.target.type;
        //var dragobj = document.getElementById(e.target.srcId);
		var offsetx= e.offsetX;
		var offsety= e.offsetY;
	
        e.dataTransfer.setData("offsetx", offsetx);
        e.dataTransfer.setData("offsety", offsety);
        e.dataTransfer.setData('type',e.target.getAttribute("type"));
    }, 
    targetDragstart(e) {
	    //debugger;
		this.move = true;
        console.log('dragstart:'+JSON.stringify(e.target));
        e.dataTransfer.setData('id',e.target.getAttribute("id"));
    },
     drag(e) {
        console.log('drag',e.target.id);
    },
     dragend(e) {
        console.log('dragend'+e)
    },
     dragenter (e) {
        console.log('dragenter');
        e.preventDefault();
    },
     dragover(e) {
        
        e.preventDefault();
        //drop.innerHTML = '';
		var pt ;
	    pt = this.getEventPosition(e);
		console.log('dragover pt.x:'+pt.x+',pt.y:'+pt.y);
	},
     dragleave(e) {
        console.log('dragleave');
        e.preventDefault();
    },
	mousemove(e){
	  var x = e.clientX||e.clientX||0;
	  var y = e.clientY||e.clientY||0;
	  console.log('mousemove x:'+x+',y:'+y);
	},
	useComponentDrop(e){
	 console.log('useComponentDrop e:'+e);
	 var id = e.dataTransfer.getData('id');
	 this.removeNowObj(id);
	},
     drop(e) {
	    //
        console.log('drop');
		
		//debugger;
        var type = e.dataTransfer.getData('type');
		var id = e.dataTransfer.getData('id');
        console.log('type:'+type);
        console.log('e.target._prevClass:'+e.target._prevClass);//Grid,Row,Grid-cell,undefined,
		console.log('e.target.parentNode._prevClass:'+e.target.parentNode._prevClass);
		//插入对象
		if(this.move){
		    this.insertMoveObject(e,id);
		}else{
 	   		this.insertObject(e,type);
        }       
	   e.preventDefault();
	   e.stopPropagation();
	},
   getTop(e) {
        if(e){
			var offset = e.offsetTop;
			if (e.offsetParent != null) offset += this.getTop(e.offsetParent);
			return parseInt(offset);
		}else{
			return 0;
		}
		
  },
 getLeft(e) {
	if(e!=null){
	 var offset = e.offsetLeft;
	 if (e.offsetParent != null) offset += this.getLeft(e.offsetParent);
	 return parseInt(offset);
	}
  },
  //插入对象
  insertObject(e,type){
	 //根据type查询对象
     var dragObj ;
	 //debugger;
	 dragObj = this.findDragObj(type);
	 if(dragObj){
		 var cloneObj = JSON.parse(JSON.stringify(dragObj));
		 //去掉viewbox,width,height
		 cloneObj.viewBox = null;
		 cloneObj.svgHeight = null;
		 cloneObj.svgWidth = null;
		 //清空选择对象
		 this.clearSelectedObject();
		 //默认选中
		 cloneObj.iselected='1';
		 //设置对象id
		 cloneObj["id"]=this.uuid();
		 //var offsetX = e.dataTransfer.getData("offsetx");
		 //var offsetY = e.dataTransfer.getData("offsety");
		  //var x = e.clientX - offsetX;
		 // var y = e.clientY - offsetY;
		  var rect = targetComponents.getBoundingClientRect();
		  //var getBoundingClientRectTop = rect.top * (targetComponents.height / rect.height);
		  //var getBoundingClientRectLeft = rect.left * (targetComponents.width / rect.width);
		  //var getBoundingClientRectTop = rect.top * (500 / rect.height);
		  //var getBoundingClientRectLeft = rect.left * (500 / rect.width);
			 
		/* var realy =
			y - getBoundingClientRectTop - document.documentElement.scrollTop;
		  var realx =
			x - getBoundingClientRectLeft - document.documentElement.scrollLeft;
		  console.log("x=" + realx + ",y=" + realy);
		 */
		 console.log('rect:'+JSON.stringify(rect)+',e.x:'+e.x+',e.y:'+e.y);
		 //设置对象位置  +
		 //TODO:新写方法根据对象类型来调整对象位置
		 cloneObj = this.adjustNewObjectPosition(cloneObj,dragObj,e);
		
		 if(cloneObj){
			this.selectedItem = cloneObj;
			this.rowList.push(cloneObj);
			//自动产生连接与cloneObj距离最短的对象的连线
			//debugger;
			//this.autoLineTimer = setInterval(this.autoJoinWithObject(cloneObj),500);
			this.autoLineTimer = setInterval(()=>{
			    var cloneObj = this.selectedItem;
				console.log('autoJoinWithObject');
				//寻找距离最短的对象
				var minDistance=0;
				var minObj=null;
				var el;
				if(this.rowList.length>1){
					var j;
					for(j=0;j<this.rowList.length;j++){
						if(this.rowList[j].id != cloneObj.id && this.rowList[j].type !='lineNode'){
						  el = this.calculateDistance(this.rowList[j],cloneObj);
						  if(el.srcId!='' && el.targetId!=''){			  
							  if(minDistance===0){
								 minDistance = el.minDistance;
								 minObj = this.rowList[j];
							  }else{
								if(minDistance>el.minDistance){
									minDistance = el.minDistance;
									minObj = this.rowList[j];
								}
							  }
						  }				  
						}
				}
				//判断是否有合适对象
				if(minObj!=null && el){
					//构造连线对象
					//根据type查询对象
					 var dragObj ;
					 dragObj = this.findDragObj('lineNode');
					 var newObj = JSON.parse(JSON.stringify(dragObj));
					//去掉viewbox,width,height
					newObj.viewBox = null;
					newObj.svgHeight = null;
					newObj.svgWidth = null;
					//设置连线开始点和结束点
					newObj.polygon[0].x = el.source.x+this.handleWidth/2;
					newObj.polygon[0].y = el.source.y+this.handleHeight/2;
					newObj.polygon[1].x = el.target.x+this.handleWidth/2;
					newObj.polygon[1].y = el.target.y+this.handleHeight/2;
					//设置连线来源和目标对象
					newObj.srcId = el.srcId;
					newObj.targetId = el.targetId;
					newObj["id"]=this.uuid();
					this.rowList.push(newObj);
					clearInterval(this.autoLineTimer);
					console.log('clearInterval');
					this.autoLineTimer = null;
				}else{
				   console.log('minObj is null or el is null');
				}
				}else{
				clearInterval(this.autoLineTimer);
				this.autoLineTimer = null;
				console.log('clearInterval');
				}
			},1000);
		}
	}
  },
  //自动产生连接与cloneObj距离最短的对象(非连线对象)的连线
  autoJoinWithObject(cloneObj){
	console.log('autoJoinWithObject');
	 //寻找距离最短的对象
	 var minDistance=0;
	 var minObj=null;
	 var el;
	 if(this.rowList.length>1){
			var j;
			for(j=0;j<this.rowList.length;j++){
				if(this.rowList[j].id != cloneObj.id && this.rowList[j].type !='lineNode'){
				  el = this.calculateDistance(this.rowList[j],cloneObj);
				  if(el.srcId!='' && el.targetId!=''){			  
					  if(minDistance===0){
						 minDistance = el.minDistance;
						 minObj = this.rowList[j];
					  }else{
						if(minDistance>el.minDistance){
							minDistance = el.minDistance;
							minObj = this.rowList[j];
						}
					  }
				  }				  
				}
		}
		//判断是否有合适对象
		if(minObj!=null && el){
			//构造连线对象
			//根据type查询对象
			 var dragObj ;
			 dragObj = this.findDragObj('lineNode');
			 var newObj = JSON.parse(JSON.stringify(dragObj));
			//去掉viewbox,width,height
			newObj.viewBox = null;
			newObj.svgHeight = null;
			newObj.svgWidth = null;
			//设置连线开始点和结束点
			newObj.polygon[0].x = el.source.x;
			newObj.polygon[0].y = el.source.y;
			newObj.polygon[1].x = el.target.x;
			newObj.polygon[1].y = el.target.y;
			//设置连线来源和目标对象
			newObj.srcId = el.srcId;
			newObj.targetId = el.targetId;
			newObj["id"]=this.uuid();
			this.rowList.push(newObj);
			clearInterval(this.autoLineTimer);
			console.log('clearInterval');
			this.autoLineTimer = null;
		}else{
		   console.log('minObj is null or el is null');
		}
	}else{
		clearInterval(this.autoLineTimer);
		this.autoLineTimer = null;
		console.log('clearInterval');
	}
	
  },
  //计算两个对象距离最短的把柄
  calculateDistance(one,other){
        var i;
		var j;
		var minDistance=0;
		var el={"source":{},"target":{},"minDistance":0,"srcId":"","targetId":""};
		for(i=0;i<one.handlerList.length;i++){
		   //中间点把柄类型
		   if(one.handlerList[i].handleType==='middletop'||one.handlerList[i].handleType==='middledown'||
		   one.handlerList[i].handleType==='rightmiddle'||one.handlerList[i].handleType==='leftmiddle'){
		   for(j=0;j<other.handlerList.length;j++){
		   if(other.handlerList[j].handleType==='middletop'||other.handlerList[j].handleType==='middledown'||
		    other.handlerList[j].handleType==='rightmiddle'||other.handlerList[j].handleType==='leftmiddle'){
			debugger;
		    var dx = Math.abs(one.handlerList[i].x - other.handlerList[j].x);
    		var dy = Math.abs(one.handlerList[i].y - other.handlerList[j].y);
            var dis = Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
			if(minDistance==0){
				minDistance = dis;
				el.source = one.handlerList[i];
				el.target = other.handlerList[j];
				el.minDistance=dis;
				el.srcId = one.id;
				el.targetId = other.id;
			}else{
			   if(minDistance > dis){
			    minDistance = dis;
				el.source = one.handlerList[i];
				el.target = other.handlerList[j];
				el.minDistance=dis;
				el.srcId = one.id;
				el.targetId = other.id;
			   }
			}
		   }
		   }
		   }
		}
		return el;
  },
  //调整新插入对象位置
  adjustNewObjectPosition(cloneObj,dragObj,e){
     //var rect = targetComponents.getBoundingClientRect();
	 //debugger;
	 var type=cloneObj.type;
	 var pt ;
	 pt = this.getEventPosition(e);
	 var offsetX = e.dataTransfer.getData("offsetx");
     var offsetY = e.dataTransfer.getData("offsety");
	 //开始节点
	 if(type ==="startNode"){
	  cloneObj.position.x = pt.x-offsetX+dragObj.ellipse.rx;
	  cloneObj.position.y = pt.y - offsetY+dragObj.ellipse.ry;
	  console.log('cloneObj.position.x:'+cloneObj.position.x+',cloneObj.position.y:'+cloneObj.position.y);
	 //循环节点
	 }else if(type =="loopNode"){
	   cloneObj.loopNode.endPt.x = Math.abs(pt.x-offsetX);
	   cloneObj.loopNode.endPt.y = Math.abs(pt.y- offsetY);
	   cloneObj.loopNode.threePt.x = dragObj.loopNode.threePt.x-dragObj.loopNode.endPt.x+ cloneObj.loopNode.endPt.x;
	   cloneObj.loopNode.threePt.y =  cloneObj.loopNode.endPt.y;
	   cloneObj.loopNode.twoPt.y = dragObj.loopNode.twoPt.y-dragObj.loopNode.endPt.y+ cloneObj.loopNode.endPt.y;
	   cloneObj.loopNode.twoPt.x = dragObj.loopNode.twoPt.x-dragObj.loopNode.endPt.x + cloneObj.loopNode.endPt.x;
	   cloneObj.loopNode.startPt.y = cloneObj.loopNode.twoPt.y;
	   cloneObj.loopNode.startPt.x = cloneObj.loopNode.endPt.x;
	 //分支节点
	 }else if(type =="decideNode"){
	   cloneObj.polygon.leftx = pt.x-offsetX;
	   cloneObj.polygon.topy = pt.y - offsetY;
	   cloneObj.polygon.lefty = cloneObj.polygon.topy+(dragObj.polygon.lefty- dragObj.polygon.topy);
	   cloneObj.polygon.topx = cloneObj.polygon.leftx+(dragObj.polygon.topx- dragObj.polygon.leftx);
	   cloneObj.polygon.rightx = cloneObj.polygon.leftx+(dragObj.polygon.rightx- dragObj.polygon.leftx);
	   cloneObj.polygon.righty = cloneObj.polygon.lefty;
	   cloneObj.polygon.bottomx  = cloneObj.polygon.topx; 
	   cloneObj.polygon.bottomy = cloneObj.polygon.topy+(dragObj.polygon.bottomy- dragObj.polygon.topy);
	 //结束节点
	 }else if(type =="endNode"){
	  cloneObj.position.x = pt.x-offsetX+dragObj.ellipse.rx;
	  cloneObj.position.y = pt.y - offsetY+dragObj.ellipse.ry;
	  console.log('cloneObj.position.x:'+cloneObj.position.x+',cloneObj.position.y:'+cloneObj.position.y);
	 //赋值节点
	 }else if(type=="assignmentNode"){
	   //
	   cloneObj.position.x = pt.x-offsetX;
	   cloneObj.position.y = pt.y-offsetY;
	 //连线节点
	 }else if(type=="lineNode"){
	  var i=0;
	  for(i=0;i<cloneObj.polygon.length;i++){
	    if(i>0){
		cloneObj.polygon[i].x = pt.x+dragObj.polygon[i].x-offsetX;
		}else{
		cloneObj.polygon[i].x = pt.x-offsetX;
		}
		cloneObj.polygon[i].y = pt.y+dragObj.polygon[i].y- offsetY;
	  }
	  console.log('lineNode polygon :'+JSON.stringify(cloneObj.polygon));
	  //计算连线节点把柄数组
	  this.calculationLineHandles(cloneObj);
	 }
	 return cloneObj;
  },
  //插入移动对象
  insertMoveObject(e,id){
     //判断目标对象类型
	 var prevClass = e.target._prevClass;
	 //根据type查询对象
     var dragObj ;
	 dragObj = this.findNowObj(id);
	 var cloneObj = JSON.parse(JSON.stringify(dragObj));
	 //删除现有对象
	 this.removeNowObj(cloneObj["id"]);
	 var objId;
	 if(prevClass=='Grid'){
	    //直接后面添加行
		var row=[];
	    row["rowId"]=this.uuid();
	    this.rowList.push(row);
		if(cloneObj){
		    row.push(cloneObj);
		}
	 }else if(prevClass=='Row'){
	    //直接加入行后面
		var rowId ;
		rowId = e.target.getAttribute("rowId");
		var rowObj= this.findRowById(rowId);
		if(rowObj&& cloneObj){
		    rowObj.push(cloneObj);
		}
	 }else if(prevClass=='Grid-cell'){
	    //插入对象前面		
        objId = e.target.getAttribute("id");
        this.insertObjectBeforce(objId,cloneObj);		
	 }else {
	    //递归查询上级，直到是Grid-cell
		var e1;
		e1 = this.recursionFindGridCell(e.target);
		if(e1){
			//插入对象前面
			objId = e1.getAttribute("id");
			this.insertObjectBeforce(objId,cloneObj);
		}
	 }
  },
  //递归查询上级，直到是Grid-cell
  recursionFindGridCell(e){
     if(e){
	    if(e){
	     var prevClass = e._prevClass;
		 if(prevClass=='Grid-cell'){
		   return e;
		 }else {
		  return this.recursionFindGridCell(e.parentElement);
		 }
		}else{
		  //debugger;
		}
	 }
	 return null;
  },
  //在指定对象之前插入对象
  insertObjectBeforce(objId,insertObj){
      var i;
      for (i = 0; i < this.rowList.length; i++) {
			var rowObj = this.rowList[i];
			var j;
			for(j=0;j<rowObj.length;j++){
				if(rowObj[j].id == objId){
				    rowObj.splice(j,0,insertObj);
					return;
				}
			}
	  }
  },
  //根据rowId查询行对象
  findRowById(rowId){
	  var i;
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId == this.rowList[i].rowId){
			return this.rowList[i];
		 }
	  }
	  return null;
  },
  //根据type查询可用组件
  findDragObj(type){
      var i;
      for (i = 0; i < this.list1.length; i++) {
	    if(type==this.list1[i].type){
		  return this.list1[i];
		}
	  }
	  return null;
  },
  //根据id删除现有组件
  removeNowObj(id){
      var i;
      for (i = 0; i < this.rowList.length; i++) {
			var rowObj = this.rowList[i];
			var j;
			for(j=0;j<rowObj.length;j++){
				if(rowObj[j].id == id){
					rowObj.splice(j,1);
					return;
				}
			}
	  }
  },
  //根据id查询现有组件
  findNowObj(id){
      var i;
      for (i = 0; i < this.rowList.length; i++) {
			var obj = this.rowList[i];
			if(obj.id == id){
				return obj;
			}
			
	  }
	  return null;
  },
  //获取事件位置
  getEventPosition(ev) {
      var x=0, y=0;
	  if (ev.offsetX || ev.offsetX == 0) {
        // Opera
        x = ev.offsetX;
        y = ev.offsetY;
      } else  if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
      }  
      return { x: x, y: y };
    },
  //uuid
	uuid() {
		var s = [];
		var hexDigits = '0123456789abcdef';
		for (var i = 0; i < 36; i++) {
			s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
		}
		s[14] = '4';
		s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
		s[8] = s[13] = s[18] = s[23] = '-';
		this.uuidA = s.join('');
		//console.log(s.join(''), 's.join("")');
		return this.uuidA;
    },
	showRowMenu (rowId) {
	    console.log('rowid:'+rowId);
        event.preventDefault()
        var x = event.clientX
        var y = event.clientY
        // Get the current location
      this.rowMenuData.axis = {
        x, y
      }
	  this.menuRowId = rowId;
    },
    beforeaddrow () {
	  var i; 
	  var rowId = this.menuRowId; 
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   var row =[];  
		   row["rowId"]=this.uuid();
		   this.rowList.splice(i,0,row);
		   break;
		 }
	  }
      console.log('beforeaddrow rowId:'+rowId);
    },
    deleterow () {
	   var rowId = this.menuRowId;
      console.log('deleterow rowId:'+rowId);
	  var i;
      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   this.rowList.splice(i,1);
		   break;
		 }
	  }
    },
	afteraddrow () {
      var i;
	  var rowId = this.menuRowId;

      for (i = 0; i < this.rowList.length; i++) {
	     if(rowId== this.rowList[i].rowId){
		   var row =[];  
		   row["rowId"]=this.uuid();
		   this.rowList.splice(i+1,0,row);
		   break;
		 }
	  }
	  console.log('afteraddrow rowId:'+rowId);
    },	
	editProperties(itemId){
	  //debugger;
	  console.log('itemId:'+itemId);
	  //组装控件属性
	  var obj;
	  obj = this.findNowObj(itemId);
	  if(obj){
	     //输入框
		 if(obj.type==="input"){
		   //查找类型为input的属性模版
		   var tempObj;
		   tempObj = this.findPropertiesTemp(obj.type);
		   var cloneTempObj;
		   //克隆一个对象
		   cloneTempObj = JSON.parse(JSON.stringify(tempObj));
		   //填写cloneTempObj属性值
		   this.fillInputProperties(cloneTempObj,obj);
		   console.log('cloneTempObj:'+JSON.stringify(cloneTempObj));
		   this.editPropertyTemplate = cloneTempObj
		   //显示属性对话框
		   this.QualityDialogFlag =true;
		 }
	  }
	},
	//控件改变属性方法回调
	changedProperties(itemId,propertiesData){
	     //debugger;
		 console.log('changedProperties:itemId:'+itemId+',propertiesData:'+propertiesData);
		  var obj;
	      obj = this.findNowObj(itemId);
	      if(obj){
		   //TODO:修改控件属性
			if(obj.type==='input'){
		     this.fillInputCtrlProperties(obj,propertiesData);
		   }
	      }
	},
	//填写输入框控件属性
	fillInputCtrlProperties(obj,propertiesData){
		if(propertiesData.modelname){
			obj.model =propertiesData.modelname;
		}
		if(propertiesData.title){
			obj.label =propertiesData.title;
		}
		if(propertiesData.width){
			obj.options.width =propertiesData.width;
		}
		if(propertiesData.placeholder){
			obj.options.placeholder =propertiesData.placeholder;
		}
		
	},
	//查询对应类型的模版
	findPropertiesTemp(type){
	   var i;
	   for(i=0;i<this.propertyTemplate.length;i++){
	      if(this.propertyTemplate[i].ctrlType===type){
			  return this.propertyTemplate[i];
		  }
	   }
	   return null;
	},
	//填写cloneTempObj属性值
	fillInputProperties(cloneTempObj,obj){
	    var i;
		cloneTempObj.id = obj.id;
	   for(i=0;i<cloneTempObj.ctrlProperties.length;i++){
	       if(cloneTempObj.ctrlProperties[i][0].model == "modelname"){
		     cloneTempObj.ctrlProperties[i][0].value = obj.model;
		   }else if(cloneTempObj.ctrlProperties[i][0].model =="title"){
			  cloneTempObj.ctrlProperties[i][0].value = obj.label;
		   }else if(cloneTempObj.ctrlProperties[i][0].model =="width"){
		      cloneTempObj.ctrlProperties[i][0].value = obj.options.width;
		   }else if(cloneTempObj.ctrlProperties[i][0].model =="placeholder"){
		     cloneTempObj.ctrlProperties[i][0].value = obj.options.placeholder;
		   }
	   }
	},
	//预览
	prevView(){
	    //debugger;
		storage.set('prevctrl',this.rowList);
		this.$router.push({ path: "/prevView"});
	},
	//获取对象屏幕坐标
	getElementPosition (element) {
	let top = element.offsetTop //这是获取元素距父元素顶部的距离
	let left = element.offsetLeft
	var current = element.offsetParent //这是获取父元素
	while ( current !== null){
	//当它上面有元素时就继续执行
	top += current.offsetTop //这是获取父元素距它的父元素顶部的距离累加起来
	left +=current.offsetLeft
	current = current.offsetParent//继续找父元素
	}
	return {top,left}
	
	
	},
	//鼠标单击
	mouseclick(evt,id){
	   console.log('call back mouseclick!evt:'+JSON.stringify(evt)+',id:'+id);
	   //debugger;
	   //循环找对象，并选中
	     var i;
	   this.clearHandle();
	   this.selectedItem = null;
	   //清空选择对象
	   this.clearSelectedObject();
	   for(i=0;i<this.rowList.length;i++){
		let item = this.rowList[i];
		if(item.id===id){
			  this.rowList[i].iselected='1';
			  this.selectedItem = item;
			  //item = Object.assign({}, item, {iselected: '1'});
			  break;
		  }else{
			  item.iselected='0';
		  }
	   }
	   
	},
    //调整移动后对象位置
    adjustObjectMovePosition(moveObj,x,y,handleType){
     console.log('enter adjustObjectMovePosition type:'+moveObj.type); 
	 var type=moveObj.type;
	 var pt={x:0,y:0} ;
	 //pt = this.getEventPosition(e);
	 var offsetX = 0;
     var offsetY = 0;
	 
	 //计算偏移量
     offsetX = x - this.clickedPt.x;
     offsetY = y - this.clickedPt.y;

	 //开始节点
	 if(type ==="startNode"){
	  //console.log(' beforchange moveObj.position.x:'+moveObj.position.x+',moveObj.position.y:'+moveObj.position.y);
      this.adjustStartEndNode(moveObj,offsetX,offsetY,handleType);
	 //循环节点
	 }else if(type =="loopNode"){
	   console.log('enter type:'+type);
	   this.adjustLoopNode(moveObj,offsetX,offsetY,handleType);
	 //分支节点
	 }else if(type =="decideNode"){
	   this.adjustDecideNode(moveObj,offsetX,offsetY,handleType);
	  
	 //结束节点
	 }else if(type =="endNode"){
	  this.adjustStartEndNode(moveObj,offsetX,offsetY,handleType);
	 //赋值节点
	 }else if(type=="assignmentNode"){
	   //
	   //moveObj.position.x = pt.x-offsetX;
	   //moveObj.position.y = pt.y-offsetY;
	   this.adjustAssignmentNode(moveObj,offsetX,offsetY,handleType);
	 //连线节点
	 }else if(type=="lineNode"){
	  this.adjustLineNode(moveObj,offsetX,offsetY,this.selectedHandler);
	  //重新计算连线节点把柄
	  this.calculationLineHandles(moveObj);
	 }
	 //自动调整连线节点源或目标坐标
	 if(type!="lineNode"){
		this.adjustLineNodeSrcOrTarget(moveObj,offsetX,offsetY,handleType);
	 }
	 this.clickedPt.x = x;
	 this.clickedPt.y = y;
	 return moveObj;
  },
  //自动调整连线的源或目标坐标
  adjustLineNodeSrcOrTarget(moveObj,offsetX,offsetY,handleType){
     //查找moveObj是否落在某条连线节点上
	 var checkLineNode = this.isAssignLineNode(moveObj);
	 if(checkLineNode===null){
		return;
	 }
     //左上角  验证checkLineNode源或目标点是否落在左上角和左下角连线上，或左上角和右上角连线上 
	  if(handleType === 'lefttop'){
	      
		  //let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      //let handleX = lefttopx+offsetX-this.handleWidth/2;
		  debugger;
		  var lefttophandler= this.findHandlerByType(moveObj,handleType);
		  var leftbottomHandler = this.findHandlerByType(moveObj,"leftdown");
		  var righttophandler = this.findHandlerByType(moveObj,"rightdown");
		  var p1={"x":lefttophandler.x-this.handleWidth/2,"y":lefttophandler.y-this.handleHeight/2};
		  var p2={"x":leftbottomHandler.x-this.handleWidth/2,"y":leftbottomHandler.y-this.handleHeight/2};
		  var q1 ={"x":checkLineNode.polygon[0].x,"y":checkLineNode.polygon[0].y};
		  var q2 ={"x":checkLineNode.polygon[1].x,"y":checkLineNode.polygon[1].y};
		  if(this.onSegment (p1, p2, q1)){
		        var middleTopHandler = this.findHandlerByType(moveObj,'middletop');
				checkLineNode.polygon[0].x = middleTopHandler.x+this.handleWidth/2;
				checkLineNode.polygon[0].y = middleTopHandler.y+this.handleHeight/2;
		  }else if(this.onSegment (p1, p2, q2)){
				var middleTopHandler = this.findHandlerByType(moveObj,'middletop');
				checkLineNode.polygon[1].x = middleTopHandler.x+this.handleWidth/2;
				checkLineNode.polygon[1].y = middleTopHandler.y+this.handleHeight/2;
		  }else{
			 p1={"x":lefttophandler.x-this.handleWidth/2,"y":lefttophandler.y-this.handleHeight/2};
		     p2={"x":righttophandler.x-this.handleWidth/2,"y":righttophandler.y-this.handleHeight/2};
			 var leftmiddleHandler = this.findHandlerByType(moveObj,'leftmiddle');
			 if(this.onSegment (p1, p2, q1)){
				checkLineNode.polygon[0].x = leftmiddleHandler.x+this.handleWidth/2;
				checkLineNode.polygon[0].y = leftmiddleHandler.y+this.handleHeight/2;
		     }else if(this.onSegment (p1, p2, q2)){
				checkLineNode.polygon[1].x = leftmiddleHandler.x+this.handleWidth/2;
				checkLineNode.polygon[1].y = leftmiddleHandler.y+this.handleHeight/2;
			}
		  }
	   //北上 验证checkLineNode源或目标点是否落在左上角和右上角连线上
	  }else if(handleType === 'middletop'){
		  /*let handleY =  lefttopy+ offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY<rightdowny ){
		   moveObj.position.y = moveObj.position.y+offsetY;
		   moveObj.assignmentNode.height = (rightdowny - moveObj.position.y);
		   
		   }*/
	  //右上角 验证checkLineNode源或目标点是否落在右上角和右下角连线上，或左上角和右上角连线上
	  }else if(handleType === 'righttop'){
		  /*let handleY =   moveObj.position.y+ offsetY-this.handleHeight/2;
	      let handleX =   rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<lefttopy && handleX> lefttopx){
		   moveObj.position.y = moveObj.position.y +offsetY;	
		   moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
		   if(rightdowny- moveObj.position.y>0){
		    moveObj.assignmentNode.height =  rightdowny- moveObj.position.y;
		   }
		   }*/
	  //西中 验证checkLineNode源或目标点是否落在左上角和左下角连线上
	  }else if(handleType === 'leftmiddle'){
	      /*let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleX>=0 &&  handleX< rightdownx){
		   moveObj.position.x = moveObj.position.x +offsetX;	
		   if(rightdownx-moveObj.position.x>0){
		    moveObj.assignmentNode.width = rightdownx-moveObj.position.x;
		   }
		  }*/
	  //中间 验证checkLineNode是源或目标id等于moveObj.id,然后挪动即可
	  }else if(handleType === 'center'){
		  /*let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<lefttopy && handleX< rightdownx){
		   lefttopx = lefttopx+offsetX;
		   lefttopy = lefttopy+ offsetY;
					   
		   moveObj.position.x = lefttopx;	
		   moveObj.position.y = lefttopy;			   
		   
		   }*/
	  //东中 验证checkLineNode源或目标点是否落在右上角和右下角连线上
	  }else if(handleType === 'rightmiddle'){
	      /*let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleX>=0 && handleX> lefttopx){
		    moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
		  }*/
	  //右下角 验证checkLineNode源或目标点是否落在右上角和右下角连线上,或者左下角和右下角
	  }else if(handleType === 'rightdown'){
		  /*let handleY =  rightdowny+ offsetY-this.handleHeight/2;
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY>lefttopy && handleX> lefttopx){
			moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
			moveObj.assignmentNode.height = moveObj.assignmentNode.height+offsetY;
		  }*/
	  //南下 验证checkLineNode源或目标点是否落在左下角和右下角
	  }else if(handleType === 'middledown'){
		  /*let handleY =  rightdowny+ offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY>lefttopy ){
			moveObj.assignmentNode.height = moveObj.assignmentNode.height+offsetY;
		   }*/
	  //左下角 验证checkLineNode源或目标点是否落在左上角和左下角连线上，或左下角和右下角连线上
	  }else if(handleType === 'leftdown'){ 
	  }
  },
  //调整连线节点
  adjustLineNode(moveObj,offsetX,offsetY,selectedHandler){
		console.log('enter adjustLineNode!');
		debugger;
		//调整把柄位置
		selectedHandler.x = selectedHandler.x+offsetX;
		selectedHandler.y = selectedHandler.y+offsetY;		
		var pt;
		//虚把柄变成实际把柄
		if(selectedHandler.fictitious==='1'){
			selectedHandler.fictitious='0';
			selectedHandler.fill ="#4F80FF";
			//连线对象增加新的把柄:
			//查询上一个实际把柄
			var prevHandler = this.findPrevHandler(selectedHandler,moveObj);
			//查询上一个实际把柄在连线对象的点数组位置
			var prevPos = this.findLineNodeHandlerPos(moveObj,prevHandler);
			//在这个位置之后插入新的把柄
			pt={x:selectedHandler.x,y:selectedHandler.y};
			moveObj.polygon.splice(prevPos+1,0,pt);
			
		}else{
			//查询实际把柄在连线对象的点数组位置
			pt={x:selectedHandler.x-offsetX,y:selectedHandler.y-offsetY};
			var pos = this.findLineNodeHandlerPos(moveObj,pt);
		    moveObj.polygon[pos].x = selectedHandler.x;
			moveObj.polygon[pos].y = selectedHandler.y;
		}
  },
  //查询上一个把柄
  findPrevHandler(selectedHandler,moveObj){
     var i;
	 for(i=0;i<moveObj.handlerList.length;i++){
	    if(i+1<moveObj.handlerList.length-1){
		  if(moveObj.handlerList[i+1].x===selectedHandler.x && moveObj.handlerList[i+1].x===selectedHandler.x){
		       return moveObj.handlerList[i];
            }		  
		     
		}
	 }
	 return null;
  },
  //查询把柄在连线节点点数组位置
  findLineNodeHandlerPos(moveObj,prevHandler){
	var i;
	for(i=0;i<moveObj.polygon.length;i++){
	   if(moveObj.polygon[i].x === prevHandler.x && moveObj.polygon[i].y === prevHandler.y){
	      return i;
	   }
	}
	return -1;
  },
  //调整赋值节点
  adjustAssignmentNode(moveObj,offsetX,offsetY,handleType){
  	console.log('enter decideNode!');
		var width = moveObj.assignmentNode.width;
		var height = moveObj.assignmentNode.height;

		let lefttopx = moveObj.position.x ;
		let lefttopy = moveObj.position.y;
		var rightdownx = moveObj.position.x+width;
		var rightdowny = lefttopy+height;
	     //左上角,北上  影响点 left(x，y ),rect.width,rect.height
	  if(handleType === 'lefttop'){
	      let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<rightdowny && handleX< rightdownx){
		   lefttopx = lefttopx+offsetX;
		   lefttopy = lefttopy+ offsetY;
		   moveObj.assignmentNode.width = (rightdownx - lefttopx);
           moveObj.assignmentNode.height = (rightdowny - lefttopy); 
		   moveObj.position.x = lefttopx;
		   moveObj.position.y = lefttopy;
		   }
	   //北上 影响点 left(y),rect.height
	  }else if(handleType === 'middletop'){
		  let handleY =  lefttopy+ offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY<rightdowny ){
		   moveObj.position.y = moveObj.position.y+offsetY;
		   moveObj.assignmentNode.height = (rightdowny - moveObj.position.y);
		   
		   }
	  //右上角 影响点  left(y ),rect.width,rect.height
	  }else if(handleType === 'righttop'){
		  let handleY =   moveObj.position.y+ offsetY-this.handleHeight/2;
	      let handleX =   rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<lefttopy && handleX> lefttopx){
		   moveObj.position.y = moveObj.position.y +offsetY;	
		   moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
		   if(rightdowny- moveObj.position.y>0){
		    moveObj.assignmentNode.height =  rightdowny- moveObj.position.y;
		   }
		   }
	  //西中 影响点 left(x),rect.width
	  }else if(handleType === 'leftmiddle'){
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleX>=0 &&  handleX< rightdownx){
		   moveObj.position.x = moveObj.position.x +offsetX;	
		   if(rightdownx-moveObj.position.x>0){
		    moveObj.assignmentNode.width = rightdownx-moveObj.position.x;
		   }
		  }
	  //中间 影响点 left(x,y)
	  }else if(handleType === 'center'){
		  let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<lefttopy && handleX< rightdownx){
		   lefttopx = lefttopx+offsetX;
		   lefttopy = lefttopy+ offsetY;
					   
		   moveObj.position.x = lefttopx;	
		   moveObj.position.y = lefttopy;			   
		   
		   }
	  //东中 rect.width
	  }else if(handleType === 'rightmiddle'){
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleX>=0 && handleX> lefttopx){
		    moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
		  }
	  //右下角 影响点 rect.height,rect.width
	  }else if(handleType === 'rightdown'){
		  let handleY =  rightdowny+ offsetY-this.handleHeight/2;
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY>lefttopy && handleX> lefttopx){
			moveObj.assignmentNode.width = moveObj.assignmentNode.width+offsetX;
			moveObj.assignmentNode.height = moveObj.assignmentNode.height+offsetY;
		  }
	  //南下 影响点 rect.height
	  }else if(handleType === 'middledown'){
		  let handleY =  rightdowny+ offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY>lefttopy ){
			moveObj.assignmentNode.height = moveObj.assignmentNode.height+offsetY;
		   }
	  //左下角 影响点 left(x） rect.width,rect.height
	  }else if(handleType === 'leftdown'){ 
	  		
	      let handleY =  rightdowny+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY>lefttopy && handleX< rightdownx){
					   
		   moveObj.position.x = moveObj.position.x+offsetX;	
		   
		   moveObj.assignmentNode.height = moveObj.assignmentNode.height+offsetY;
		   moveObj.assignmentNode.width = rightdownx-moveObj.position.x;
		   }
	  }
  },
  //调整判断节点
  adjustDecideNode(moveObj,offsetX,offsetY,handleType){
		console.log('enter decideNode!');
		var width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
		var height = (moveObj.polygon.bottomy - moveObj.polygon.topy);

		let lefttopx = moveObj.polygon.leftx ;
		let lefttopy = moveObj.polygon.lefty - height/2;
		var rightdownx = moveObj.polygon.rightx;
		var rightdowny = moveObj.polygon.bottomy;
	     //左上角,北上  影响点 left(x，y ),top(x,y),right(y),bottom(x)
	  if(handleType === 'lefttop'){
	      let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.polygon.lefty && handleX< moveObj.polygon.rightx){
		   moveObj.polygon.leftx = moveObj.polygon.leftx+offsetX;
		   moveObj.polygon.lefty = moveObj.polygon.lefty+ offsetY;
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
            
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.topy = moveObj.polygon.lefty-(moveObj.polygon.bottomy-moveObj.polygon.lefty);
		   moveObj.polygon.righty = moveObj.polygon.righty+offsetY;
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   }
	   //北上 影响点 left(y),top(y),right(y)
	  }else if(handleType === 'middletop'){
		  let handleY =  moveObj.polygon.topy + offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY<moveObj.polygon.lefty ){
		   moveObj.polygon.topy = moveObj.polygon.topy+offsetY;
		   height = (moveObj.polygon.bottomy - moveObj.polygon.topy);
           
		   moveObj.polygon.lefty = moveObj.polygon.topy+height/2;		    
		   moveObj.polygon.righty = moveObj.polygon.lefty;
		   }
	  //右上角 影响点  left(y ),top(x,y),right(x,y),bottom(x)
	  }else if(handleType === 'righttop'){
		  let handleY =   moveObj.polygon.topy+ offsetY-this.handleHeight/2;
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.polygon.lefty && handleX> moveObj.polygon.leftx){
		   moveObj.polygon.rightx = moveObj.polygon.rightx+offsetX;
		   moveObj.polygon.topy = moveObj.polygon.topy +offsetY;	
		   
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
           height = (moveObj.polygon.bottomy - moveObj.polygon.topy);
		   
		   moveObj.polygon.lefty = moveObj.polygon.topy+ height/2;
		   moveObj.polygon.righty = moveObj.polygon.lefty ;
		   
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   }
	  //西中 影响点 left(x),top(x),bottom(x)  ok
	  }else if(handleType === 'leftmiddle'){
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleX>=0 &&  handleX< moveObj.polygon.rightx){
		   moveObj.polygon.leftx = moveObj.polygon.leftx+offsetX;
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
            
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   }
	  //中间 影响点 全部
	  }else if(handleType === 'center'){
		  let handleY =  lefttopy+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.polygon.lefty && handleX< moveObj.polygon.rightx){
		   moveObj.polygon.leftx = moveObj.polygon.leftx+offsetX;
		   moveObj.polygon.lefty = moveObj.polygon.lefty+ offsetY;
            
		   moveObj.polygon.topx = moveObj.polygon.topx+offsetX;
		   moveObj.polygon.topy = moveObj.polygon.topy+offsetY;
		   moveObj.polygon.righty = moveObj.polygon.righty+offsetY;
		   moveObj.polygon.rightx = moveObj.polygon.rightx+offsetX;
		   moveObj.polygon.bottomy = moveObj.polygon.bottomy+offsetY;
		   moveObj.polygon.bottomx = moveObj.polygon.bottomx+offsetX;
		   }
	  //东中 right(x),top(x),bottom(x)
	  }else if(handleType === 'rightmiddle'){
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleX>=0 && handleX> moveObj.polygon.leftx){
		   moveObj.polygon.rightx = moveObj.polygon.rightx+offsetX;
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
            
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   }
	  //右下角 影响点 bottom(x,y) right(x,y),left(y),top(x)
	  }else if(handleType === 'rightdown'){
		  let handleY =  rightdowny+ offsetY-this.handleHeight/2;
	      let handleX = rightdownx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY>moveObj.polygon.lefty && handleX> moveObj.polygon.leftx){
		   moveObj.polygon.rightx = moveObj.polygon.rightx+offsetX;
		   moveObj.polygon.bottomy = moveObj.polygon.bottomy+ offsetY;
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
           height =   (moveObj.polygon.bottomy - moveObj.polygon.topy);
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.righty = moveObj.polygon.topy+height/2;
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.lefty =moveObj.polygon.righty ;
		   }
		  
		  
	  //南下 影响点 bottom (y) left(y) right(y)
	  }else if(handleType === 'middledown'){
		  let handleY =  rightdowny+ offsetY-this.handleHeight/2;
		  if(handleY>=0 && handleY>moveObj.polygon.lefty ){
		   moveObj.polygon.bottomy = moveObj.polygon.bottomy+ offsetY;
           height =   (moveObj.polygon.bottomy - moveObj.polygon.topy);
		   
		   moveObj.polygon.topy = moveObj.polygon.bottomy-height;
		   moveObj.polygon.righty = moveObj.polygon.bottomy-height/2;
		   moveObj.polygon.lefty = moveObj.polygon.righty;
		   }
	  //左下角 影响点 left(x,y） right(y) bottom(x,y) top(x)
	  }else if(handleType === 'leftdown'){ 
	  		
	      let handleY =  rightdowny+ offsetY-this.handleHeight/2;
	      let handleX = lefttopx+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY>moveObj.polygon.lefty && handleX< moveObj.polygon.rightx){
		   moveObj.polygon.leftx = moveObj.polygon.leftx+offsetX;
		   moveObj.polygon.bottomy = moveObj.polygon.bottomy+offsetY;
		   
		   
		   width = (moveObj.polygon.rightx - moveObj.polygon.leftx);
           height =   (moveObj.polygon.bottomy - moveObj.polygon.topy);
		   moveObj.polygon.lefty = moveObj.polygon.bottomy - height/2;
		   
		   moveObj.polygon.topx = moveObj.polygon.leftx+width/2;
		   moveObj.polygon.righty = moveObj.polygon.lefty;
		   
		   moveObj.polygon.bottomx = moveObj.polygon.leftx+width/2;
		   }
	  }
  },
  //调整循环节点
  adjustLoopNode(moveObj,offsetX,offsetY,handleType){
     //左上角,北上
	  if(handleType === 'lefttop'){
	      let handleY =  moveObj.loopNode.endPt.y+ offsetY-5-this.handleHeight/2;
	      let handleX = moveObj.loopNode.startPt.x+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.loopNode.startPt.y && handleX<moveObj.loopNode.threePt.x){
		   moveObj.loopNode.endPt.x = moveObj.loopNode.endPt.x+offsetX;
		   moveObj.loopNode.endPt.y = moveObj.loopNode.endPt.y+ offsetY;
		   moveObj.loopNode.threePt.x = moveObj.loopNode.threePt.x-moveObj.loopNode.endPt.x+ moveObj.loopNode.endPt.x;
		   moveObj.loopNode.threePt.y =  moveObj.loopNode.endPt.y;
		   //moveObj.loopNode.twoPt.y = moveObj.loopNode.twoPt.y-moveObj.loopNode.endPt.y+ moveObj.loopNode.endPt.y;
		   //moveObj.loopNode.twoPt.x = moveObj.loopNode.twoPt.x-moveObj.loopNode.endPt.x + moveObj.loopNode.endPt.x;
		   //moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		   moveObj.loopNode.startPt.x = moveObj.loopNode.endPt.x;
		   }
	   //北上
	  }else if(handleType === 'middletop'){
		  console.log('target.y='+moveObj.loopNode.endPt.y+ offsetY);
		  let handleY =  moveObj.loopNode.endPt.y+ offsetY-5-this.handleHeight/2;
		  if(handleY>=0 && handleY<moveObj.loopNode.startPt.y){
 		    moveObj.loopNode.endPt.y = moveObj.loopNode.endPt.y+ offsetY;
		    moveObj.loopNode.threePt.y =  moveObj.loopNode.endPt.y;
		    moveObj.loopNode.twoPt.y = moveObj.loopNode.twoPt.y-moveObj.loopNode.endPt.y+ moveObj.loopNode.endPt.y;
		    moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		   }
	  //右上角
	  }else if(handleType === 'righttop'){
		  let handleY =  moveObj.loopNode.threePt.y+offsetY-5-this.handleHeight/2;
	      let handleX = moveObj.loopNode.threePt.x+offsetX-this.handleWidth/2;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.loopNode.startPt.y && handleX>moveObj.loopNode.endPt.x){
		   //moveObj.loopNode.endPt.x = moveObj.loopNode.endPt.x+offsetX;
		   moveObj.loopNode.endPt.y = moveObj.loopNode.endPt.y+ offsetY;
		   moveObj.loopNode.threePt.x = moveObj.loopNode.threePt.x+offsetX;
		   moveObj.loopNode.threePt.y =  moveObj.loopNode.endPt.y;
		   //moveObj.loopNode.twoPt.y = moveObj.loopNode.twoPt.y-moveObj.loopNode.endPt.y+ moveObj.loopNode.endPt.y;
		   moveObj.loopNode.twoPt.x = moveObj.loopNode.threePt.x;
		   //moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		   //moveObj.loopNode.startPt.x = moveObj.loopNode.endPt.x;
		  }
	  //西中
	  }else if(handleType === 'leftmiddle'){
		   let handleX = moveObj.loopNode.endPt.x+offsetX-this.handleWidth/2;
		   if(handleX>=0 && handleX<moveObj.loopNode.threePt.x){
		   moveObj.loopNode.endPt.x = moveObj.loopNode.endPt.x+offsetX;
		   moveObj.loopNode.startPt.x = moveObj.loopNode.endPt.x;
		  }
	  //中间
	  }else if(handleType === 'center'){
		  let handleY =  moveObj.loopNode.endPt.y+ offsetY-5-this.handleHeight/2;
	      let handleX = moveObj.loopNode.endPt.x+offsetX-this.handleWidth/2;
		  let oldEndPt={x:0,y:0};
		  oldEndPt.x = moveObj.loopNode.endPt.x;
		  oldEndPt.y = moveObj.loopNode.endPt.y;
		  let oldThreePty = moveObj.loopNode.threePt.y;
		  if(handleY>=0 && handleX>=0 && handleY<moveObj.loopNode.startPt.y && handleX<moveObj.loopNode.threePt.x){
		   moveObj.loopNode.endPt.x = moveObj.loopNode.endPt.x+offsetX;
		   moveObj.loopNode.endPt.y = moveObj.loopNode.endPt.y+ offsetY;
		   moveObj.loopNode.threePt.x = moveObj.loopNode.endPt.x+(moveObj.loopNode.threePt.x-oldEndPt.x);
		   moveObj.loopNode.threePt.y = moveObj.loopNode.endPt.y+ (moveObj.loopNode.threePt.y-oldEndPt.y);
		   moveObj.loopNode.twoPt.y = moveObj.loopNode.threePt.y+ (moveObj.loopNode.twoPt.y-oldThreePty);
		   moveObj.loopNode.twoPt.x = moveObj.loopNode.threePt.x;
		   moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		   moveObj.loopNode.startPt.x = moveObj.loopNode.endPt.x;
		  }	
	  //东中
	  }else if(handleType === 'rightmiddle'){
		   let handleX = moveObj.loopNode.threePt.x+offsetX-this.handleWidth/2;
		   if(handleX>=0 && handleX>moveObj.loopNode.endPt.x){
		   moveObj.loopNode.threePt.x = moveObj.loopNode.threePt.x+offsetX;
		   moveObj.loopNode.twoPt.x = moveObj.loopNode.threePt.x;
		  }
	  //右下角
	  }else if(handleType === 'rightdown'){
		  let handleY =  moveObj.loopNode.twoPt.y+ offsetY-5-this.handleHeight/2;
	      let handleX = moveObj.loopNode.twoPt.x+offsetX-this.handleWidth/2;
		  
		  if(handleY>=0 && handleX>=0 && handleY>moveObj.loopNode.endPt.y && handleX>moveObj.loopNode.endPt.x){
		   moveObj.loopNode.threePt.x = moveObj.loopNode.threePt.x+offsetX;
		   moveObj.loopNode.twoPt.y = moveObj.loopNode.twoPt.y+offsetY;
		   moveObj.loopNode.twoPt.x = moveObj.loopNode.twoPt.x+offsetX;
		   
		   moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		   }
		  
		  
	  //南下
	  }else if(handleType === 'middledown'){
		  let handleY =  moveObj.loopNode.twoPt.y+ offsetY-5-this.handleHeight/2;
		  if( handleY>=0 && handleY>  moveObj.loopNode.endPt.y){
			   moveObj.loopNode.twoPt.y = moveObj.loopNode.twoPt.y+ offsetY;
			   moveObj.loopNode.startPt.y = moveObj.loopNode.twoPt.y;
		  }
	  //左下角
	  }else if(handleType === 'leftdown'){ 
	      let handleY =  moveObj.loopNode.startPt.y+ offsetY-5-this.handleHeight/2;
	      let handleX = moveObj.loopNode.startPt.x+offsetX-this.handleWidth/2;
		  if( handleX>=0  && handleY>=0 && handleY>moveObj.loopNode.endPt.y && handleX<moveObj.loopNode.threePt.x ){
			  moveObj.loopNode.startPt.y= moveObj.loopNode.startPt.y+ offsetY;
			  moveObj.loopNode.startPt.x = moveObj.loopNode.startPt.x+offsetX
			  moveObj.loopNode.endPt.x= moveObj.loopNode.startPt.x;
			  moveObj.loopNode.twoPt.y = moveObj.loopNode.startPt.y;
		  }
	  }
	  },
  //调整开始和结束节点
  adjustStartEndNode(moveObj,offsetX,offsetY,handleType){
  	  //左上角,北上
	  if(handleType === 'lefttop'){
		  var lefttopx = (moveObj.position.x-(moveObj.ellipse.rx- offsetX));
		  var lefttopy = (moveObj.position.y-(moveObj.ellipse.ry - offsetY));
		  if(moveObj.ellipse.rx - offsetX>0 && moveObj.ellipse.ry - offsetY>0 && lefttopx>0 && lefttopy>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx - offsetX;
			  moveObj.ellipse.ry = moveObj.ellipse.ry - offsetY;
		  }else{
			console.log('moveObj.ellipse.rx - offsetX:'+(moveObj.ellipse.rx - offsetX));
			console.log('moveObj.ellipse.ry - offsetY:'+(moveObj.ellipse.ry - offsetY));
			console.log('lefttopx:'+lefttopx+',lefttopy:'+lefttopy);
		  }
	  //北上
	  }else if(handleType === 'middletop'){
		  lefttopy = (moveObj.position.y-(moveObj.ellipse.ry - offsetY));
		  if( moveObj.ellipse.ry - offsetY>0  && lefttopy>0 ){
			  moveObj.ellipse.ry = moveObj.ellipse.ry - offsetY;
		  }
	  //右上角
	  }else if(handleType === 'righttop'){
		  lefttopx = (moveObj.position.x-(moveObj.ellipse.rx+ offsetX));
		  lefttopy = (moveObj.position.y-(moveObj.ellipse.ry + offsetY));
		  if(moveObj.ellipse.rx + offsetX>0 && moveObj.ellipse.ry + offsetY>0 && lefttopx>0 && lefttopy>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx + offsetX;
			  moveObj.ellipse.ry = moveObj.ellipse.ry + offsetY;
		  }
	  //西中
	  }else if(handleType === 'leftmiddle'){
		  lefttopx = (moveObj.position.x-(moveObj.ellipse.rx- offsetX));
		  if(moveObj.ellipse.rx - offsetX>0  && lefttopx>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx - offsetX;
		  }
	  //中间
	  }else if(handleType === 'center'){
		  lefttopx = moveObj.position.x+ offsetX;
		  lefttopy = moveObj.position.y+ offsetY;
		  if(lefttopy>0  && lefttopx>0 ){
			  moveObj.position.x = lefttopx;
			  moveObj.position.y = lefttopy;
		  }	
	  //东中
	  }else if(handleType === 'rightmiddle'){
		  lefttopx = (moveObj.position.x-(moveObj.ellipse.rx+ offsetX));
		  if(moveObj.ellipse.rx + offsetX>0  && lefttopx>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx + offsetX;
		  }	
	  //右下角
	  }else if(handleType === 'rightdown'){
		  lefttopx = (moveObj.position.x-(moveObj.ellipse.rx-+ offsetX));
		  lefttopy = (moveObj.position.y-(moveObj.ellipse.ry + offsetY));
		  if(moveObj.ellipse.rx + offsetX>0 && moveObj.ellipse.ry + offsetY>0 && lefttopx>0 && lefttopy>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx + offsetX;
			  moveObj.ellipse.ry = moveObj.ellipse.ry + offsetY;
		  }
	  //南下
	  }else if(handleType === 'middledown'){
		  lefttopy = (moveObj.position.y-(moveObj.ellipse.ry + offsetY));
		  if( moveObj.ellipse.ry + offsetY>0  && lefttopy>0 ){
			  moveObj.ellipse.ry = moveObj.ellipse.ry + offsetY;
		 }
	  //左下角
	  }else if(handleType === 'leftdown'){
		  lefttopx = (moveObj.position.x-(moveObj.ellipse.rx- offsetX));
		  lefttopy = (moveObj.position.y-(moveObj.ellipse.ry - offsetY));
		  if(moveObj.ellipse.rx - offsetX>0 && moveObj.ellipse.ry - offsetY>0 && lefttopx>0 && lefttopy>0 ){
			  moveObj.ellipse.rx = moveObj.ellipse.rx - offsetX;
			  moveObj.ellipse.ry = moveObj.ellipse.ry - offsetY;
	  		  
	  }
	  }
	  console.log('moveObj.position.x:'+moveObj.position.x+',moveObj.position.y:'+moveObj.position.y+',lefttopx:'+lefttopx+',lefttopy:'+lefttopy);
  },
  //放入到handlerList x y
  putHandlerListXY(hType,xValue,yValue){
     //debugger;
	 console.log('enter putHandlerListXY');
	 var i;
	 for(i=0;i<this.handlerList.length;i++){				
		if(this.handlerList[i].handleType===hType){
		    if(xValue>=0){
				this.handlerList[i].x = xValue;
			}
			if(yValue>=0){
				this.handlerList[i].y = yValue;
			}
			return;
		}
	 }
  },	
  //批量放到handlerList 
  batchPutHandlerList(list){
    //debugger;
	this.handlerList = list;
  },
   //把柄按下事件
	handleMouseDown(evt,id){
	 //debugger;
	 console.log('enter handleMouseDown');
	 let pt = this.getEventPosition(evt);
	 console.log('click pt:'+JSON.stringify(pt));
	 this.selectedHandler =this.checkInHandle(pt); 
	 if(this.selectedHandler){
		console.log('click to rect');
		this.clickHandle = true;
		this.clickedPt = pt;
	 }else{
	   this.clickHandle = false;
       	  
	  console.log("not click to rect handleMouseDown,pt "+JSON.stringify(pt)+",handlerList:"+JSON.stringify(this.handlerList));
	 }
	},
	//把柄移动事件
	handleMouseMove(evt){
	  //console.log("handleMouseMove:"+evt);
	  //let dx = evt.x-this.clickedPt.x;
	  //let dy = evt.y - this.clickedPt.y;
	 console.log('enter handleMouseMove,clickHandle:'+this.clickHandle);
	  //this.$emit("movehandler",this.item.id,this.handleType,dx,dy);
	  if(this.clickHandle){
	   //debugger; 
		let pt = this.getEventPosition(evt);
		//调整对象
		this.adjustObjectMovePosition(this.selectedItem,pt.x,pt.y,this.selectedHandler.handleType);
		//this.x = pt.x;
		//this.y = pt.y;
	  }
	},
	//把柄按键释放事件
	handleMouseUp(evt,id){
	  console.log("handleMouseUp:"+evt+","+id);
	  this.clickHandle = false;
	},
   //检查点落在哪个把柄 	
	checkInHandle(pt){
	 //debugger;
	 var selectHandler = this.checkInHandleList(pt,this.handlerList);
	 
	 //如果非连线节点找不到，则尝试连线节点
	 if(selectHandler==null){
		var i;
		for(i=0;i<this.rowList.length; i++){
			if(this.rowList[i].type ==='lineNode'){
				selectHandler = this.checkInHandleList(pt,this.rowList[i].handlerList);
				if(selectHandler!=null){
					return selectHandler;
				}
			}
		}
	 }else{
		return selectHandler;
	 }
	},
	//清理把柄坐标
	clearHandle(){
	 var i;
	 for(i=0;i<this.handlerList.length;i++){
	  this.handlerList[i].x =-1;
	  this.handlerList[i].y =-1;
	  }
	 },
	//清空选择对象
	clearSelectedObject(){
	  var i;
      for (i = 0; i < this.rowList.length; i++) {
	     this.rowList[i].iselected = '0';
		
	  }
	},
	//检测点是否在把柄数组
	checkInHandleList(pt,handlers){
	 var i;
	 for(i=0;i<handlers.length;i++){
	  if(pt.x>=handlers[i].x && pt.x <=handlers[i].x+this.handleWidth && pt.y>=handlers[i].y && pt.y<=handlers[i].y+this.handleHeight){
		  return handlers[i];
	  }
	 }
	 return null;
	},
	//根据把柄类型查找对象的把柄
	findHandlerByType(obj,handleType){
	 var i;
	 for(i=0;i<obj.handlerList.length;i++){
	  if(obj.handlerList[i].handleType=== handleType){
		  return obj.handlerList[i];
	  }
	 }
	 return null;	
	},
	//判断三个点是否在同一线 p1-p2 为线两点,q为测试点 
	//在同一条线 返回true,否则返回false
	onSegment (p1, p2, q){
	    if(p1.y == p2.y){
			if ((q.x >=p1.x && q.x<=p2.x )||(q.x >=p2.x && q.x<=p1.x )){
				return true;
			}else{
				return false;
			}
		}else if(p1.x == p2.x){
			if ((q.y >=p1.y && q.y<=p2.y )||(q.y >=p2.y && q.y<=p1.y )){
				return true;
			}else{
				return false;
			}
		
		}else{
			let k1 = ((p2.y - p1.y)/(p2.x-p1.x)).toFixed(3)
			let k2 = ((q.y-p1.y)/(q.x-p1.x)).toFixed(3)
			let error = Math.abs(k2 - k1)
			if (error - 0.1 <= Number.EPSILON) {
			  return true;
			} else {
			  return false;
			}
		}
  },
  //判断对象是否在某个连线节点的源或目标
  isAssignLineNode(moveObj){
       var i;
       for(i=0;i<this.rowList.length; i++){
			if(this.rowList[i].type ==='lineNode'){
				if(this.rowList[i].srcId === moveObj.id||this.rowList[i].targetId === moveObj.id){
					return this.rowList[i];
				}
			}
		}
		return null;
  }
}
}
</script>
<style>
    .demo * {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .drop {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
.onerow {
  display: flex;
  margin-left:0px;
  width: 100%;
}
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border: 0;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}
.el-collapse-item__header {
  border: 0;
  height: 40px;
  line-height: 40px;
}
.el-collapse-item__wrap {
  border-bottom: 0;
}
.el-icon-circle-close {
    color: #c9a2a2;
    font-size: 20px;
    position:relative;
	margin-top:-20px;
    right: 50px;
}
.col-4 {
  flex: 0 0 70%;
  max-width: 70%;
  margin-right: 10px;
  margin-left:5px;
}
.col-5 {
  flex: 0 0 30%;
  max-width: 30%;
  margin-right: 2px;
}
.Grid {
  width: 100%;
}
.Row {
  display: flex;
  border: 1px dashed #000;
  height: 50px;
}
.Grid-cell {
  display: flex;
  /* flex: 1; */
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  font-size: 14px;
  position: relative;
  pointer-events: none;
}	
</style>